<template>
  <div id="index">
    <el-container>
      <el-aside>
        <div class="login"></div>
        <el-row>
          <el-col :span="24" class="nav">
            <el-menu
              :unique-opened = "true"
              default-active="home"          
              class="el-menu-vertical-demo"
              :router="true"
              background-color="#222"
              text-color="rgba(136,136,136,1)"
              active-text-color="rgba(255,255,255,1)">
              <el-submenu index="1" >
                <template slot="title" class="is-opened" aria-expanded='true'>
                  <i><img src="../assets/image/homeicon1.png" alt=""></i>
                  <span>EBUC首页</span>
                </template>
                <el-menu-item index="home" class="nav-home">系统首页</el-menu-item>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i><img src="../assets/image/homeicon2.png" alt=""></i>
                  <span>交易中心</span>
                </template>
                  <el-menu-item index="ebgrade">EBUC交易</el-menu-item>
                  <el-menu-item index="grade">现金积分交易</el-menu-item>
                  <el-menu-item index="currency">注册币兑换</el-menu-item>
              </el-submenu>

              <el-submenu index="3">
                <template slot="title">
                  <i><img src="../assets/image/homeicon3.png" alt=""></i>                  
                  <span>资金明细</span>
                </template>
                  <el-menu-item index="ebwallet">EBUC钱包</el-menu-item>
                  <el-menu-item index="integralwallet">现金积分钱包</el-menu-item>
                  <el-menu-item index="backshop">回购钱包</el-menu-item>
                  <el-menu-item index="registercoin">注册币</el-menu-item>
                  <el-menu-item index="activecode">激活码</el-menu-item>
              </el-submenu>

              <el-submenu index="4">
                <template slot="title">
                  <i><img src="../assets/image/homeicon4.png" alt=""></i>
                  <span>业务管理</span>
                </template>
                  <el-menu-item index="register">注册</el-menu-item>
                  <el-menu-item index="active" v-show="usermes.baodan==='2'">激活</el-menu-item>
                  <el-menu-item index="update" v-show="usermes.baodan==='2'">升级</el-menu-item>
                  <el-menu-item index="formcenter">报单中心</el-menu-item>
                  <el-menu-item index="sendmes" v-show="usermes.baodan==='2'">站内信</el-menu-item>
              </el-submenu>
              
              <el-submenu index="5">
                <template slot="title">
                  <i><img src="../assets/image/homeicon5.png" alt=""></i>
                  <span>团队管理</span>
                </template>
                  <el-menu-item index="member">会员结构</el-menu-item>
                  <el-menu-item index="recommendlist">推荐列表</el-menu-item>
              </el-submenu>

              <el-submenu index="6">
                <template slot="title">
                  <i><img src="../assets/image/homeicon8.png" alt=""></i>                  
                  <span>商城</span>
                </template>
                  <el-menu-item index="product">商城购买</el-menu-item>
                  <el-menu-item index="myorder">我的订单</el-menu-item>
              </el-submenu>

              <el-submenu index="7">
                <template slot="title">
                  <i><img src="../assets/image/homeicon6.png" alt=""></i>                  
                  <span>新闻</span>
                </template>
                  <el-menu-item index="news">实时新闻</el-menu-item>
              </el-submenu>

              <el-submenu index="8">
                <template slot="title">
                  <i><img src="../assets/image/homeicon7.png" alt=""></i>
                  <span>账号设置</span>
                </template>
                  <el-menu-item index="basicmessage">基本信息</el-menu-item>
                  <el-menu-item index="loginpassword">登陆密码设置</el-menu-item>
                  <el-menu-item index="safepassword">安全密码设置</el-menu-item>
              </el-submenu>

            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header>
          <div class="box1">
            <div class="jifen">现金积分：<span>{{usermes.jifen}}</span></div>
            <div class="bi">EBUC币：<span>{{usermes.bi}}</span></div>
            <div class="bi">当前EBUC币价格：<span>{{usermes.money}}</span></div>
            <div class="zhucebi">注册币：<span>{{usermes.zhucebi}}</span></div>
            <div class="jihuoma">激活码：<span>{{usermes.jihuoma}}</span></div>
          </div>
          <div class="box2">
            <div class="name"><span>{{usermes.name}}&ensp;</span>[<span> LV：{{usermes.grade}} </span>]</div>
            <div class="signout" @click="signout">退出</div>      
          </div>
        </el-header>
        
        <div class="public">
          <div class="box">
            <router-view></router-view>
          </div>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
export default {
  name: "index",
  data() {
    return {
      isactive: false,
      user: {},
      money: ''
    };
  },

  computed: {
    // ...mapState(['jifen','bi','zhucebi','jihuoma','name','grade','baodan'])
    ...mapState(["usermes"])
  },
  mounted() {
    
  },
  created() {
    // this.isLogin();
    this.homemes();
    this.$bus.$on("loadebuc", () => {
      this.homemes();
    });
  },
  methods: {
    // 判断是否登录
    isLogin() {
      const isLogin = sessionStorage.getItem('isLogin');
      if (!isLogin) {
        this.$router.push('login');
      }
    },
    storeDatato() {
      this.$store.commit({
        type: "increment",
        jifen: this.user.jifen_money,
        bi: this.user.ebuc_money,
        zhucebi: this.user.zc_money,
        jihuoma: this.user.jihuo,
        name: this.user.user_name,
        grade: this.user.user_rank,
        baodan: this.user.type, //报单中心
        uid: this.user.id, //用户id
        money: this.money, //用户id
      });
    },
    ...mapMutations(["signOut,addLogin"]),
    homemes() {
      this.axios
        .post("Index/index")
        .then(({ data }) => {
          console.log(data);
          this.user = data.user;
          this.money = data.money;
          // sessionStorage.setItem("usermes", JSON.stringify(state));
          // state.usermes=state.usermes,
          this.storeDatato();
          // this.addLogin();
          // var arr = sessionStorage.getItem('usermes');
          // var array = JSON.parse(arr);
          // this.baodan = array.usermes.baodan;
          // console.log(array);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    signout() {
      this.axios
        .post("Login/logout")
        .then(({ data }) => {
          console.log(data);
          sessionStorage.removeItem("isLogin");
          sessionStorage.removeItem("usermes");
          sessionStorage.removeItem("status");
          sessionStorage.removeItem("type");
          this.$router.push("login");
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang='scss'>
#index {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  .el-aside {
    width: 250px !important;
    background-color: #222;
    color: #333;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    z-index: 99;
    i {
      width: 20px;
      height: 20px;
      margin-right: 20px;
      img {
        width: 15px;
      }
    }
    .login {
      width: 240px;
      height: 60px;
      margin: 20px auto;
    }
    .nav .nav-home {
      background-color: rgba(224, 3, 0, 1) !important;
    }
    .el-menu {
      text-align: left;
      border-right: none;
      .is-active {
        color: #fff;
        background: rgba(224, 3, 0, 1) !important;
      }
      el-menu-item {
        background-color: rgba(224, 3, 0, 1) !important;
      }
      .el-submenu .el-submenu__title,
      .el-menu .el-menu-item {
        height: 50px;
        &:hover {
          background-color: rgba(77, 77, 77, 0.3) !important;
          border-left: 5px solid rgba(224, 3, 0, 1);
          color: #fff !important;
        }
      }
    }
    .el-menu--inline .el-menu-item {
      height: 39px !important;
      line-height: 39px;
    }
    .el-menu--inline .el-menu-item:visited {
      background-color: rgba(224, 3, 0, 1) !important;
    }
    .isactive {
      background-color: pink !important;
    }
  }
  .el-header {
    min-width: 1250px;
    height: 40px !important;
    width: 100%;
    padding-left: 300px;
    padding-right: 30px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-family: MicrosoftYaHei;
    color: rgba(102, 102, 102, 1);
    border-bottom: 1px solid rgba(240, 240, 240, 1);
    box-sizing: border-box;
    .box1 {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      div {
        margin-right: 30px;
        span {
          color: red;
        }
      }
    }
    .box2 {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      span:nth-of-type(2) {
        color: #ffa900;
      }
      .signout {
        cursor: pointer;
      }
      div {
        margin-right: 36px;
      }
    }
  }
  .el-main {
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .public {
    width: calc(100% - 250px);
    height: calc(100% - 40px);
    background-color: #f2f2f2;
    position: absolute;
    top: 40px;
    left: 250px;
    box-sizing: border-box;
    // overflow: auto;
    .box {
      min-width: 1100px;
      // min-height: 600px;
      width: calc(100% - 40px);
      height: calc(100% - 20px);
      margin: 10px 20px;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      // position: fixed;
      // top: 0;
      // bottom: 0;
      // left: 250px;
      overflow: auto;
    }
  }
}
</style>


